<html>

<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/assest/layui-v2.4.5/css/layui.css" media="all">
    <#include file='/public.html' />
</head>

<body style="background-color: #F2F2F2;">
    <div style="height: 100px;"></div>
    <div style="margin-left: auto; margin-right: auto; width: 350px">

        <div class="layui-col-md6" style=" margin: 5px;width:100%;">
            <div class="layui-card">
                <div class="layui-card-header">登录</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <table style="width: 100%;">
                            <tr>
                                <td>用户名</td>
                                <td style="padding: 4px;">
                                    <input type="text" name="username" lay-verify="required" placeholder=""
                                        autocomplete="off" class="layui-input">

                                </td>
                            </tr>
                            <tr>
                                <td>密码</td>
                                <td style="padding: 4px;">

                                    <input type="password" name="pwd" lay-verify="pwd" 
                                        autocomplete="off" placeholder="" class="layui-input">

                                </td>
                            </tr>

                            <tr>
                                <td>验证码</td>
                                <td style="padding: 4px;">
                                    <table>
                                        <tr>
                                            <td>
                                                <input style="width:100px;" type="text" name="ValidateCode" lay-verify="required"
                                                    placeholder="" maxlength="4" autocomplete="off" class="layui-input">
                                            </td>
                                            <td><img style="margin-left: 10px;" src="/login/ValidateCode"></td>

                                        </tr>
                                    </table>


                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div style="float: left;padding: 10px;">
                                        <input type="checkbox" name="ckpwd" lay-skin="primary" title="记住密码">

                                    </div>
                                    <div style="float: right; text-align: right; margin-right: 20px; margin-top: 4px;">
                                        <button class="layui-btn" lay-submit="" lay-filter="btnlogin">登录</button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div style="text-align:center;">测试帐户 username:admin pwd:admin</div>
    </div>
    <script type="text/javascript" src="/assest/layui-v2.4.5/layui.all.js"></script>
    <script>
        //Demo
        layui.use('form', function () {
            var form = layui.form;
            //从文档上复制的好像没有这句
            form.render();
            //自定义验证规则
            form.verify({

                pwd: [
                    /^[\S]{4,12}$/
                    , '密码必须4到12位，且不能出现空格'
                ]

            });
            form.on('submit(btnlogin)', function (data) {
              //  alert(JSON.stringify(data.field));
                $.post("/login/check",data.field,function(ret){
                    if(ret.code!==0)
                    layer.alert(ret.message, {title: '提示'});
                    else
                    $(window).attr('location','/');
                });



                return false;
            });
        });
    </script>
</body>

</html>